<template>
  <div v-if="isAuth(['ROOT', 'WORKFLOW:APPROVAL', 'FILE:ARCHIVE'])">
    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="searchHandle()">
      <el-form-item prop="creatorName">
        <el-input v-model="dataForm.creatorName" size="medium" placeholder="申请人" clearable="clearable" />
      </el-form-item>
      <el-form-item prop="type">
        <el-select v-model="dataForm.type" placeholder="类别" size="medium" clearable="clearable">
          <el-option label="会议申请" value="会议申请"></el-option>
          <el-option label="员工请假" value="员工请假"></el-option>
          <el-option label="报销申请" value="报销申请"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="instanceId">
        <el-input v-model="dataForm.instanceId" size="medium" placeholder="实例编号" clearable="clearable" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="searchHandle()">查询</el-button>
      </el-form-item>
      <el-form-item class="mold">
        <el-radio-group v-model="dataForm.status" size="medium" @change="searchHandle()">
          <el-radio-button label="待审批"></el-radio-button>
          <el-radio-button label="已审批"></el-radio-button>
          <el-radio-button label="已结束"></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-table
        ref="approvalTable"
        :data="dataList"
        border="border"
        v-loading="dataListLoading"
        cell-style="padding: 4px 0"
        size="medium"
        style="width: 100%;"
        @expand-change="expand"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
    >
      <el-table-column prop="remark" header-align="center" align="center" type="expand">
        <template #default="scope">
          <div class="content-container">
            <table class="content-table">
              <tbody v-if="scope.row.type == '会议申请'">
              <tr>
                <th><span>主题</span></th>
                <td :title="scope.row.title">{{ scope.row.title }}</td>
              </tr>
              <tr>
                <th><span>内容</span></th>
                <td :title="content.desc">{{ content.desc }}</td>
              </tr>
              <tr>
                <th><span>日期</span></th>
                <td>{{ content.date }}&nbsp;&nbsp;&nbsp;{{ content.start }} ~ {{ content.end }}</td>
              </tr>
              <tr>
                <th><span>地点</span></th>
                <td>{{ content.place }}</td>
              </tr>
              <tr>
                <th><span>参会人</span></th>
                <td :title="content.members">{{ content.members }}</td>
              </tr>
              <tr>
                <th><span>审批结果</span></th>
                <td>
                  <span v-if="scope.row.status != '已结束'">审批中</span>
                  <span v-if="scope.row.status == '已结束' && scope.row.result == '同意'">
											已同意
										</span>
                  <span v-if="scope.row.status == '已结束' && scope.row.result == '不同意'">
											已拒绝
										</span>
                </td>
              </tr>
              </tbody>
              <tbody v-if="scope.row.type == '员工请假'">
              <tr>
                <th><span>请假原因</span></th>
                <td :title="content.reason">{{ content.reason }}</td>
              </tr>
              <tr>
                <th><span>请假类型</span></th>
                <td>{{ content.type == 1 ? '病假' : '事假' }}</td>
              </tr>
              <tr>
                <th><span>申请人</span></th>
                <td>{{ content.name }}</td>
              </tr>
              <tr>
                <th><span>起始时间</span></th>
                <td>{{ content.start }}</td>
              </tr>
              <tr>
                <th><span>截止时间</span></th>
                <td>{{ content.end }}</td>
              </tr>
              <tr>
                <th><span>审批结果</span></th>
                <td>
                  <span v-if="scope.row.status != '已结束'">审批中</span>
                  <span v-if="scope.row.status == '已结束' && scope.row.result == '同意'">
											已同意
										</span>
                  <span v-if="scope.row.status == '已结束' && scope.row.result == '不同意'">
											已拒绝
										</span>
                </td>
              </tr>
              </tbody>
              <tbody v-if="scope.row.type == '报销申请'">
              <tr>
                <th><span>申请人</span></th>
                <td>{{ content.name }}</td>
              </tr>
              <tr>
                <th><span>报销金额</span></th>
                <td>{{ content.amount }}元</td>
              </tr>
              <tr>
                <th><span>借款金额</span></th>
                <td>{{ content.anleihen }}元</td>
              </tr>
              <tr>
                <th><span>实际金额</span></th>
                <td>{{ content.balance }}元</td>
              </tr>
              <tr>
                <th><span>报销类型</span></th>
                <td>{{ content.type }}</td>
              </tr>
              <tr>
                <th><span>审批结果</span></th>
                <td>
                  <span v-if="scope.row.status != '已结束'">审批中</span>
                  <span v-if="scope.row.status == '已结束' && scope.row.result == '同意'">
											已同意
										</span>
                  <span v-if="scope.row.status == '已结束' && scope.row.result == '不同意'">
											已拒绝
										</span>
                </td>
              </tr>
              </tbody>
            </table>
            <el-image
                class="archive"
                v-if="content.hasOwnProperty('files')"
                :src="content.files[0].url"
                :preview-src-list="archiveList"
            ></el-image>
            <el-image class="bpmn" :src="bpmnUrl" :preview-src-list="bpmnList"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" header-align="center" align="center" label="序号" width="100" />
      <el-table-column prop="title" header-align="center" align="center" label="审批事项" min-width="400" />
      <el-table-column prop="type" header-align="center" align="center" label="类别" min-width="180" />
      <el-table-column prop="creatorName" header-align="center" align="center" label="申请人" min-width="150" />
      <el-table-column prop="createDate" header-align="center" align="center" label="发起日期" min-width="180" />
      <el-table-column prop="status" header-align="center" align="center" label="状态" min-width="150">
        <template #default="scope">
          <span v-if="scope.row.status != '已结束'" style="color: orange;">审批中</span>
          <span v-if="scope.row.status == '已结束' && scope.row.result == '同意'" style="color: #17B3A3;">
						已同意
					</span>
          <span v-if="scope.row.status == '已结束' && scope.row.result == '不同意'" style="color: #f56c6c;">
						已拒绝
					</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" width="150" label="操作">
        <template #default="scope">
          <el-button
              type="text"
              size="medium"
              v-if="isAuth(['ROOT', 'WORKFLOW:APPROVAL']) && dataForm.status == '待审批' && !scope.row.filing"
              @click="approveHandle(scope.row.taskId)"
          >
            审批
          </el-button>
          <el-button
              type="text"
              size="medium"
              v-if="dataForm.status != '待审批'"
              @click="viewHandle(scope.row)"
          >
            查看
          </el-button>
          <el-button
              type="text"
              size="medium"
              v-if="isAuth(['ROOT', 'FILE:ARCHIVE']) && scope.row.filing"
              @click="archive(scope.row.taskId)"
          >
            归档
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <archive v-if="archiveVisible" ref="archive" @refreshDataList="loadDataList"></archive>
  </div>
</template>

<script>
import Archive from './archive.vue';
export default {
  components: {
    Archive
  },
  data: function() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      archiveVisible: false,
      dataForm: {
        creatorName: null,
        type: null,
        status: '待审批',
        instanceId: null
      },
      dataList: [],
      content: {},
      bpmnUrl: null,
      bpmnList: [],
      archiveList: [],
      dataRule: {
        creatorName: [{ required: false, pattern: '^[\u4e00-\u9fa5]{2,20}$', message: '姓名格式错误' }],
        instanceId: [
          {
            required: false,
            pattern: '^[0-9A-Za-z\\-]{36}$',
            message: '实例编号格式错误'
          }
        ]
      },
      expands: [],
      getRowKeys(row) {
        return row.taskId;
      }
    };
  },
  methods: {
    // 获取数据列表
    loadDataList: function() {
      let that = this;
      that.dataListLoading = true;
      let data = {
        creatorName: that.dataForm.creatorName,
        type: that.dataForm.type,
        status: that.dataForm.status,
        instanceId: that.dataForm.instanceId,
        page: that.pageIndex,
        length: that.pageSize
      };
      that.$http('approval/searchTaskByPage', 'POST', data, true, function(resp) {
        let page = resp.page;
        that.dataList = page.list;
        that.totalCount = page.totalCount;
        that.dataListLoading = false;
      });
    },
    searchHandle: function() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$refs['dataForm'].clearValidate();
          if (this.dataForm.creatorName == '') {
            this.dataForm.creatorName = null;
          }
          if (this.dataForm.instanceId == '') {
            this.dataForm.instanceId = null;
          }
          if (this.pageIndex != 1) {
            this.pageIndex = 1;
          }
          this.loadDataList();
        } else {
          return false;
        }
      });
    },
    expand: function(row, expandedRows) {
      let that = this;
      if (expandedRows.length > 0) {
        that.expands = [];
        if (row) {
          that.expands.push(row.taskId);
          let data = {
            instanceId: row.processId,
            type: row.type,
            status: row.status
          };

          that.$http('approval/searchApprovalContent', 'POST', data, false, function(resp) {
            let content = resp.content;
            that.content = content;
            if (content.hasOwnProperty('files')) {
              for (let one of content.files) {
                that.archiveList.push(one.url);
              }
            }

            if (row.type == '报销申请') {
              if (content.typeId == 1) {
                content.type = '普通报销';
              } else if (content.typeId == 2) {
                content.type = '差旅报销';
              }
            }
          });

          that.bpmnUrl =
              that.$baseUrl +
              'approval/searchApprovalBpmn' +
              '?instanceId=' +
              row.processId +
              '&time=' +
              new Date().getTime();
          that.bpmnList = [that.bpmnUrl];
        }
      } else {
        that.expands = [];
      }
    },
    approve: function(taskId, approval) {
      let that = this;
      that.dataListLoading = true;
      let data = {
        taskId: taskId,
        approval: approval
      };
      that.$http('approval/approvalTask', 'POST', data, true, function(resp) {
        that.pageIndex = 1;
        that.loadDataList();
      });
    },
    approveHandle: function(taskId) {
      let that = this;
      that.$confirm('请选择对该条申请的处理意见', '提示', {
        confirmButtonText: '同意',
        cancelButtonText: '否决',
        type: 'warning',
        distinguishCancelAndClose: true,
        callback: function(action) {
          if (action == 'confirm') {
            that.approve(taskId, '同意');
          } else if (action == 'cancel') {
            that.approve(taskId, '不同意');
          }
        }
      });
    },
    viewHandle: function(row) {
      this.$refs.approvalTable.toggleRowExpansion(row, true);
    },
    archive: function(taskId) {
      this.archiveVisible = true;
      this.$nextTick(() => {
        this.$refs.archive.init(taskId);
      });
    }
  },
  created: function() {
    this.loadDataList();
  }
};
</script>

<style lang="less" scoped="scoped">
@import url('approval.less');
</style>
